<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>诊断结果查询</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
  <style>
    :root {
      --primary: #3498db;
      --primary-dark: #2980b9;
      --secondary: #2ecc71;
      --dark: #2c3e50;
      --light: #ecf0f1;
      --gray: #95a5a6;
      --danger: #e74c3c;
      --warning: #f39c12;
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      --transition: all 0.3s ease;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
      min-height: 100vh;
      padding: 20px;
      color: var(--dark);
      position: relative;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .header {
      text-align: center;
      margin-bottom: 30px;
      padding: 20px;
      background: white;
      border-radius: 10px;
      box-shadow: var(--shadow);
      animation: fadeIn 0.6s ease-out;
    }

    .header h1 {
      color: var(--dark);
      font-size: 2.5rem;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
    }

    .header p {
      color: var(--gray);
      font-size: 1.1rem;
    }

    .card {
      background: white;
      border-radius: 10px;
      box-shadow: var(--shadow);
      overflow: hidden;
      margin-bottom: 30px;
      animation: slideUp 0.5s ease-out;
    }

    .card-header {
      background: var(--primary);
      color: white;
      padding: 15px 25px;
      font-size: 1.3rem;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .card-body {
      padding: 25px;
      position: relative;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: var(--dark);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .form-control {
      width: 100%;
      padding: 12px 15px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 1rem;
      transition: var(--transition);
      background-color: #f9fbfd;
    }

    .form-control:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    }

    .btn-container {
      position: relative;
      width: 100%;
      text-align: center;
      margin-top: 20px;
    }

    .btn {
      display: inline-block;
      padding: 12px 30px;
      background: var(--primary);
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 1.1rem;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      max-width: 300px;
      margin: 0 auto;
    }

    .btn:hover:not(:disabled) {
      background: var(--primary-dark);
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    .btn:disabled {
      background: #bdc3c7;
      cursor: not-allowed;
      opacity: 0.8;
    }

    .btn i {
      font-size: 1.2rem;
    }

    .error-message {
      color: var(--danger);
      font-size: 0.9rem;
      margin-top: 5px;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .hint {
      font-size: 0.85rem;
      color: var(--gray);
      margin-top: 5px;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .results-section {
      background: white;
      border-radius: 10px;
      box-shadow: var(--shadow);
      overflow: hidden;
      animation: fadeIn 0.8s ease-out;
    }

    .results-header {
      background: var(--secondary);
      color: white;
      padding: 15px 25px;
      font-size: 1.3rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .results-count {
      font-weight: 600;
      background: rgba(0, 0, 0, 0.1);
      padding: 3px 10px;
      border-radius: 20px;
    }

    .scrollable {
      max-height: 500px;
      overflow-y: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.95rem;
    }

    th {
      background-color: #2c3e50;
      color: white;
      position: sticky;
      top: 0;
      padding: 12px 15px;
      text-align: left;
    }

    tr:nth-child(even) {
      background-color: #f8f9fa;
    }

    tr:hover {
      background-color: #e9f7fe;
    }

    td {
      padding: 10px 15px;
      border-bottom: 1px solid #eee;
    }

    .no-results {
      text-align: center;
      padding: 30px;
      color: var(--gray);
    }

    .no-results i {
      font-size: 3rem;
      margin-bottom: 15px;
      color: #bdc3c7;
    }

    /* 查询状态提示 */
    .query-status {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 15px 25px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      gap: 15px;
      z-index: 100;
      opacity: 0;
      visibility: hidden;
      transition: var(--transition);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .query-status.active {
      opacity: 1;
      visibility: visible;
    }

    .query-status .spinner {
      width: 24px;
      height: 24px;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: white;
      animation: spin 1s linear infinite;
    }

    .query-status .text {
      font-weight: 600;
      font-size: 1.1rem;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (max-width: 768px) {
      .form-grid {
        grid-template-columns: 1fr;
      }

      .header h1 {
        font-size: 2rem;
      }

      .card-header, .results-header {
        font-size: 1.1rem;
      }

      .query-status {
        width: 90%;
        text-align: center;
        flex-direction: column;
        gap: 10px;
      }
    }
    /* 新增导出按钮样式 */
    .export-btn {
      background-color: #28a745 !important;
      margin-left: 10px;
    }

    .export-btn:hover:not(:disabled) {
      background-color: #218838 !important;
    }

    .header-buttons {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    @media (max-width: 768px) {
      .header-buttons {
        flex-direction: column;
        align-items: flex-start;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <div class="header">
    <h1><i class="fas fa-search"></i> 诊断结果查询</h1>
    <p>输入查询条件获取详细数据</p>
  </div>

  <div style="position: absolute; top: 20px; right: 20px; z-index: 1000;">
    <a th:href="@{${logoutUrl}}"
       style="display: inline-block;
              padding: 8px 15px;
              background-color: #ff4757;
              color: white;
              text-decoration: none;
              border-radius: 4px;
              font-weight: bold;
              box-shadow: 0 2px 5px rgba(0,0,0,0.2);
              transition: all 0.3s;">
      <i class="fa fa-sign-out" aria-hidden="true"></i> 退出
    </a>
  </div>

  <div class="card">
    <div class="card-header">
      <i class="fas fa-filter"></i> 查询条件
    </div>
    <div class="card-body">
      <form id="queryForm" th:action="@{/gtly}" method="post" th:object="${query}">
        <div class="form-grid">
          <div class="form-group">
            <label for="jh"><i class="fas fa-hashtag"></i> 井号 (JH)</label>
            <input type="text" id="jh" class="form-control" th:field="*{jh}" placeholder="例如: N2-D3-P135">
          </div>

          <!-- 作业区下拉选择（包含"全部"选项） -->
          <div class="form-group">
            <label for="km"><i class="fas fa-map-marked-alt"></i> 作业区 (KM)</label>
            <select id="km" class="form-control" th:field="*{km}">
              <!-- 添加安全检查，避免kmOptions为空时出错 -->
              <option th:if="${kmOptions != null}"
                      th:each="option : ${kmOptions.entrySet()}"
                      th:value="${option.key}"
                      th:text="${option.value}"
                      th:selected="${option.key == query.km}">
              </option>
            </select>
          </div>

          <div class="form-group">
            <label for="csrq"><i class="fas fa-clock"></i> 测试时间 (CSRQ)</label>
            <!-- 修改：datetime-local -> date，移除 step 属性 -->
            <input type="date" id="csrq" class="form-control" th:field="*{csrq}">
            <div class="error-message" th:if="${dateError}">
              <i class="fas fa-exclamation-circle"></i> <span th:text="${dateError}"></span>
            </div>
            <div class="hint">
              <!-- 修改：更新提示信息 -->
              <i class="fas fa-info-circle"></i> 格式: YYYY-MM-DD (精确到日)
            </div>
          </div>

          <div class="form-group">
            <label for="dm"><i class="fas fa-users"></i> 队号 (DM)</label>
            <input type="text" id="dm" class="form-control" th:field="*{dm}" placeholder="例如: 42">
          </div>
        </div>

        <div class="btn-container">
          <button type="submit" class="btn" id="queryBtn">
            <i class="fas fa-search"></i> 查询数据
          </button>

          <!-- 查询状态提示框 -->
          <div class="query-status" id="queryStatus">
            <div class="spinner"></div>
            <div class="text">正在查询，请稍等...</div>
          </div>
        </div>
      </form>
    </div>
  </div>

  <div class="results-section" th:if="${results != null}">
    <div class="results-header">
      <div>
        <i class="fas fa-table"></i> 查询结果
      </div>
      <div class="header-buttons">
        <div class="results-count" th:text="'共 ' + ${results.size()} + ' 条记录'"></div>
        <button id="exportBtn" class="btn export-btn">
          <i class="fas fa-file-excel"></i> 导出Excel
        </button>
      </div>
    </div>

    <div class="scrollable">
      <table id="resultTable">
        <thead>
        <tr>
          <th>ID</th>
          <th>井号(JH)</th>
          <th>作业区(KM)</th>
          <th>功图时间(CHECK_DATE)</th>
          <th>动液面(DYM)</th>
          <th>产液量(CYL_GTMJ)</th>
          <th>工况诊断(GKZD)</th>
          <th>队号(DM)</th>
          <th>采油方式(CYFS)</th>

          <th>测试日期(CSRQ)</th>
          <th>泵径(BJ)</th>
          <th>含水(HS)</th>
          <th>泵深(BS)</th>

          <th>实测最大载荷(XDZDZH)</th>
          <th>实测最小载荷(XDZXZH)</th>
          <th>实测冲程(CC)</th>
          <th>实测冲次(CC1)</th>

        </tr>
        </thead>
        <tbody>
        <tr th:if="${#lists.isEmpty(results)}">
          <td colspan="7" class="no-results">
            <i class="fas fa-database"></i>
            <h3>未找到匹配记录</h3>
            <p>请尝试修改查询条件</p>
          </td>
        </tr>

        <tr th:each="result : ${results}" th:if="${not #lists.isEmpty(results)}">
          <td th:text="${result.id} ?: ''"></td>
          <td th:text="${result.jh} ?: ''"></td>
          <td>
                <span th:if="${result.km != null}">
                  <span th:text="'第' + ${numberUtils.toChinese(result.km)} + '作业区'"></span>
                </span>
          </td>
          <td>
          <span th:if="${result.checkDate != null}"
                th:text="${#temporals.format(result.checkDate, 'yyyy-MM-dd HH:mm:ss')}">
                        </span>
          </td>
          <td th:text="${result.dymDisplay}"></td>
          <td th:text="${result.cylGtmjDisplay}"></td>
          <td th:text="${result.gkzd} ?: ''"></td>
          <td th:text="${result.dm} ?: ''"></td>
          <td th:text="${result.cyfs} ?: ''"></td>
          <td>
          <span th:if="${result.csrq != null}"
                th:text="${#temporals.format(result.csrq, 'yyyy-MM-dd HH:mm:ss')}">
                        </span>
          </td>
          <td th:text="${result.bj} ?: ''"></td>
          <td th:text="${result.hs} ?: ''"></td>
          <td th:text="${result.bs} ?: ''"></td>

          <td th:text="${result.xdzdzh} ?: ''"></td>
          <td th:text="${result.xdzxzh} ?: ''"></td>
          <td th:text="${result.cc} ?: ''"></td>
          <td th:text="${result.cc1} ?: ''"></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const queryForm = document.getElementById('queryForm');
    const queryBtn = document.getElementById('queryBtn');
    const queryStatus = document.getElementById('queryStatus');

    if (queryForm) {
      // 监听表单提交事件
      queryForm.addEventListener('submit', function(e) {
        // 禁用查询按钮，防止重复点击
        queryBtn.disabled = true;
        // 显示查询状态提示
        queryStatus.classList.add('active');

        // 模拟查询完成（实际开发中应监听AJAX请求完成事件）
        // 这里为了演示，使用setTimeout模拟查询过程
        // 实际应用中，应移除这个setTimeout，在服务器返回响应后隐藏提示
        // setTimeout(function() {
        //   // 隐藏查询状态提示
        //   queryStatus.classList.remove('active');
        //   // 重新启用查询按钮
        //   queryBtn.disabled = false;
        // }, 3000); // 3秒后模拟查询完成
      });
    }

    // 仅供演示：模拟一些查询结果数据
    const mockResults = [
      {id: 1001, jh: 'N2-D3-P135', km: 1, checkDate: '2023-10-15 08:30:00',
        dymDisplay: '正常', cylGtmjDisplay: '25.6', gkzd: '正常', dm: '42', cyfs: '机械采油',
        csrq: '2023-10-14 10:15:00', bj: '44', hs: '75%', bs: '1200',
        xdzdzh: '45.2', xdzxzh: '12.5', cc: '2.8', cc1: '6'},
      {id: 1002, jh: 'N2-D3-P137', km: 2, checkDate: '2023-10-15 09:15:00',
        dymDisplay: '偏低', cylGtmjDisplay: '18.3', gkzd: '供液不足', dm: '43', cyfs: '机械采油',
        csrq: '2023-10-14 11:30:00', bj: '38', hs: '82%', bs: '1100',
        xdzdzh: '42.8', xdzxzh: '11.2', cc: '2.5', cc1: '5'},
      {id: 1003, jh: 'N2-D3-P139', km: 1, checkDate: '2023-10-15 10:45:00',
        dymDisplay: '正常', cylGtmjDisplay: '30.1', gkzd: '正常', dm: '42', cyfs: '机械采油',
        csrq: '2023-10-14 14:20:00', bj: '50', hs: '68%', bs: '1250',
        xdzdzh: '48.5', xdzxzh: '15.3', cc: '3.0', cc1: '7'}
    ];

    // 仅供演示：点击查询按钮时模拟结果显示
    if (queryBtn) {
      queryBtn.addEventListener('click', function() {
        // 实际应用中不需要此部分，表单提交后由后端返回结果
      });
    }
    // 添加导出Excel功能
    const exportBtn = document.getElementById('exportBtn');
    if (exportBtn) {
      exportBtn.addEventListener('click', function() {
        // 获取结果表格
        const table = document.getElementById('resultTable');

        // 检查是否有数据
        const rowCount = table.rows.length;
        if (rowCount <= 1) { // 只有表头或无数据
          alert('没有数据可导出');
          return;
        }

        // 创建工作簿
        const wb = XLSX.utils.book_new();

        // 从表格创建工作表
        const ws = XLSX.utils.table_to_sheet(table);

        // 将工作表添加到工作簿
        XLSX.utils.book_append_sheet(wb, ws, "查询结果");

        // 生成Excel文件并下载
        XLSX.writeFile(wb, '诊断结果查询.xlsx');
      });
    }
  });
</script>
</body>
</html>